<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>澜澜的数字大冒险</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #53c5f0;
            --success-color: #1dd1a1;
            --warning-color: #f0932b;
            --dark-text: #4a4a4a;
            --light-bg: #e8e8e8;
            --frame-bg: #1e1e1e;
        }

        body {
            background: var(--light-bg);
            font-family: 'ZCOOL KuaiLe', cursive;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }

        .phone-frame {
            width: 100%;
            max-width: 420px;
            height: 85vh;
            max-height: 800px;
            background: var(--frame-bg);
            border-radius: 60px;
            padding: 15px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3), inset 0 5px 15px rgba(255,255,255,0.1);
        }

        .phone-screen {
            background: linear-gradient(135deg, #a8e0ff, #fbc2eb);
            width: 100%;
            height: 100%;
            border-radius: 45px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .notch {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 180px;
            height: 30px;
            background: var(--frame-bg);
            border-radius: 0 0 20px 20px;
            z-index: 2;
        }
        
        .content-area {
            padding: 50px 25px 25px;
            text-align: center;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        header h1 {
            color: var(--primary-color);
            font-size: 2.2em;
            margin: 0;
        }

        .rules p, .difficulty-selection p {
            color: var(--dark-text);
            font-size: 1.1em;
            line-height: 1.5;
            margin: 10px 0;
        }

        #attempts-left {
            font-size: 1.2em;
            color: var(--warning-color);
            font-weight: bold;
        }

        #guess-input {
            width: 60%;
            padding: 12px 20px;
            border-radius: 50px;
            border: 3px solid #ced6e0;
            font-size: 1.5em;
            text-align: center;
            font-family: 'ZCOOL KuaiLe', cursive;
            margin: 15px 0;
            transition: all 0.3s ease;
        }

        #guess-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        input[type=number] { -moz-appearance: textfield; }

        button {
            font-family: 'ZCOOL KuaiLe', cursive;
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            font-size: 1.3em;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            width: 80%;
            margin-top: 10px;
        }
        button:active {
            transform: scale(0.95);
        }

        #guess-button {
            background-color: var(--secondary-color);
            color: white;
            font-size: 1.5em;
        }
        #guess-button:disabled {
            background-color: #a4b0be;
            cursor: not-allowed;
        }

        .result p {
            font-size: 1.3em;
            min-height: 45px;
            margin-top: 15px;
            font-weight: bold;
            line-height: 1.4;
        }

        #restart-button {
            background-color: var(--success-color);
            color: white;
        }
        
        .difficulty-options button {
            background: var(--primary-color);
            color: white;
        }

        .footer {
            margin-top: 20px;
        }
        .author-signature {
            font-size: 0.9em;
            color: var(--dark-text);
            margin-bottom: 10px;
        }
        .like-button-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
        #like-button {
            background: #fff;
            color: var(--primary-color);
            padding: 8px 20px;
            font-size: 1em;
            width: auto;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>

    <div class="phone-frame">
        <div class="phone-screen">
            <div class="notch"></div>
            
            <div id="difficulty-screen" class="content-area">
                <header><h1>🚀 数字大冒险 🚀</h1></header>
                <div class="difficulty-selection">
                    <p>探险家，请选择你的挑战难度！</p>
                    <div class="difficulty-options">
                        <button onclick="selectDifficulty(7)">简单 (7次机会)</button>
                        <button onclick="selectDifficulty(5)">普通 (5次机会)</button>
                        <button onclick="selectDifficulty(3)">挑战 (3次机会)</button>
                    </div>
                </div>
                <div class="footer">
                    <p class="author-signature">由 澜澜 & AI 伙伴共同创作</p>
                </div>
            </div>
            
            <div id="game-screen" class="content-area hidden">
                <header>
                    <h1 id="game-title"></h1>
                </header>
                <div class="rules">
                    <p id="rules-text"></p>
                </div>
                <div class="game-play">
                    <p id="attempts-left"></p>
                    <input type="number" id="guess-input" placeholder="输入数字...">
                    <button id="guess-button">猜！</button>
                </div>
                <div class="result">
                    <p id="message"></p>
                </div>
                <div class="footer">
                    <div class="like-button-container">
                        <button id="like-button">👍 为澜澜点赞</button>
                        <span id="like-count">0</span>
                    </div>
                    <button id="restart-button" class="hidden">换个难度</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // --- 游戏核心变量 ---
        let targetNumber;
        let attempts;
        let maxAttempts;
        let luckyHintUsed;
        let lowerBoundary;
        let upperBoundary;
        let isFirstGuess;

        // --- 界面元素获取 ---
        const difficultyScreen = document.getElementById('difficulty-screen');
        const gameScreen = document.getElementById('game-screen');
        const gameTitle = document.getElementById('game-title');
        const rulesText = document.getElementById('rules-text');
        const guessInput = document.getElementById('guess-input');
        const guessButton = document.getElementById('guess-button');
        const messageEl = document.getElementById('message');
        const attemptsLeftEl = document.getElementById('attempts-left');
        const restartButton = document.getElementById('restart-button');
        const likeButton = document.getElementById('like-button');
        const likeCountSpan = document.getElementById('like-count');

        // --- 点赞功能逻辑 ---
        const likeStorageKey = 'lanlanGameLikes';
        let currentLikes = parseInt(localStorage.getItem(likeStorageKey) || '0');
        likeCountSpan.textContent = currentLikes;

        likeButton.addEventListener('click', () => {
            currentLikes++;
            likeCountSpan.textContent = currentLikes;
            localStorage.setItem(likeStorageKey, currentLikes.toString());
            likeButton.disabled = true; // 每个会话只能点一次赞
            likeButton.textContent = '已赞！❤️';
        });

        // --- 游戏流程函数 ---
        function selectDifficulty(attemptsCount) {
            maxAttempts = attemptsCount;
            difficultyScreen.classList.add('hidden');
            gameScreen.classList.remove('hidden');
            initGame();
        }

        function initGame() {
            targetNumber = Math.floor(Math.random() * 100) + 1;
            attempts = maxAttempts;
            luckyHintUsed = false;
            lowerBoundary = 1;
            upperBoundary = 100;
            isFirstGuess = true;

            gameTitle.textContent = `🚀 数字大冒险 🚀`;
            rulesText.textContent = `嘿！我心里想了一个 1-100 的秘密数字 🤫，你有 ${maxAttempts} 次机会！`;
            
            messageEl.innerHTML = '祝你好运！✨';
            messageEl.style.color = 'var(--dark-text)';
            attemptsLeftEl.textContent = `你还有 ${attempts} 次机会 🎯`;
            
            guessInput.value = '';
            guessInput.disabled = false;
            guessButton.disabled = false;
            restartButton.classList.add('hidden');
            
            // 恢复点赞按钮状态
            likeButton.disabled = false;
            likeButton.textContent = '👍 为澜澜点赞';
        }

        function handleGuess() {
            if (guessButton.disabled) return;
            const userGuess = parseInt(guessInput.value);

            if (isNaN(userGuess) || userGuess < lowerBoundary || userGuess > upperBoundary) {
                messageEl.innerHTML = `嘿！要输入 ${lowerBoundary} ~ ${upperBoundary} 之间的数字哦！🤔`;
                messageEl.style.color = 'var(--primary-color)';
                return;
            }

            attempts--;

            if (userGuess === targetNumber) {
                messageEl.innerHTML = `🎉 猜对啦！你真是个小天才！🎉`;
                messageEl.style.color = 'var(--success-color)';
                endGame();
            } else if (attempts > 0) {
                updateHints(userGuess);
            } else {
                messageEl.innerHTML = `😭 呀，机会用完啦... 答案是 ${targetNumber}。`;
                messageEl.style.color = 'var(--primary-color)';
                endGame();
            }
            isFirstGuess = false;
            guessInput.value = '';
            guessInput.focus();
        }

        function updateHints(userGuess) {
            let hint = '';
            const difference = Math.abs(targetNumber - userGuess);

            // “幸运提示”逻辑：仅在第一次猜测且差距很大时触发
            if (isFirstGuess && !luckyHintUsed && difference > 30) {
                luckyHintUsed = true;
                const rangeSize = 20;
                let hintLower = Math.max(1, targetNumber - Math.floor(Math.random() * (rangeSize - 1)));
                let hintUpper = hintLower + rangeSize - 1;
                if (hintUpper > 100) {
                    hintUpper = 100;
                    hintLower = hintUpper - rangeSize + 1;
                }
                hint = `<br><small>🌟 幸运提示！答案在 ${hintLower} ~ ${hintUpper} 之间！</small>`;
            } else { // 常规“动态缩小范围”提示
                if (userGuess > targetNumber) {
                    upperBoundary = Math.min(upperBoundary, userGuess - 1);
                } else {
                    lowerBoundary = Math.max(lowerBoundary, userGuess + 1);
                }
                hint = `<br><small>提示：现在它在 ${lowerBoundary} ~ ${upperBoundary} 之间</small>`;
            }
            
            if (userGuess > targetNumber) {
                messageEl.innerHTML = '哇，太大了！像天上的云朵 ☁️' + hint;
                messageEl.style.color = 'var(--warning-color)';
            } else {
                messageEl.innerHTML = '嘻嘻，太小啦！像地上的蚂蚁 🐜' + hint;
                messageEl.style.color = 'var(--secondary-color)';
            }
            attemptsLeftEl.textContent = `你还有 ${attempts} 次机会 🎯`;
        }

        function endGame() {
            guessInput.disabled = true;
            guessButton.disabled = true;
            restartButton.classList.remove('hidden');
            attemptsLeftEl.textContent = `游戏结束！`;
        }
        
        function goBackToDifficultySelection() {
            gameScreen.classList.add('hidden');
            difficultyScreen.classList.remove('hidden');
        }

        // --- 事件监听 ---
        guessButton.addEventListener('click', handleGuess);
        restartButton.addEventListener('click', goBackToDifficultySelection);
        guessInput.addEventListener('keyup', (event) => {
            if (event.key === 'Enter') {
                event.preventDefault();
                handleGuess();
            }
        });
        
    </script>

</body>
</html>